<template>
    <v-dialog v-model="dialogVisible" max-width="1000px" persistent scrollable>
        <v-card class="elevation-10">
            <!-- 标题栏 -->
            <v-card-title class="d-flex align-center pa-6 bg-primary">
                <v-icon class="mr-3" color="white" size="24">mdi-account-multiple-plus</v-icon>
                <span class="text-h5 text-white font-weight-medium">{{ isEdit ? '编辑客户关系' : '新增客户关系' }}</span>
            </v-card-title>

            <v-card-text class="pa-8 ">
                <v-form ref="formRef" v-model="formValid">
                    <!-- 基础信息区域 -->
                    <div class="mb-8  hover-card elevation-9 pa-4 rounded-xl">
                        <div class="text-h6 text-primary mb-4 d-flex align-center">
                            <v-icon class="mr-2" color="primary">mdi-cog</v-icon>
                            基础信息
                        </div>
                        <v-row>
                            <v-col cols="12" md="3">
                                <v-select v-model="baseForm.sourceChannel" :items="channels"
                                    density="comfortable" hide-details="auto" item-title="name"
                                    item-value="id" label="来源渠道" prepend-inner-icon="mdi-source-branch"
                                    variant="outlined" color="primary" />
                            </v-col>
                            <v-col cols="12" md="3">
                                <v-select v-model="baseForm.priority" :items="[
                                    { title: '⭐⭐⭐⭐⭐ 五星客户', value: '5' },
                                    { title: '⭐⭐⭐⭐ 四星客户', value: '4' },
                                    { title: '⭐⭐⭐ 三星客户', value: '3' },
                                    { title: '⭐⭐ 二星客户', value: '2' },
                                    { title: '⭐ 一星客户', value: '1' }
                                ]" density="comfortable" hide-details="auto" item-title="title"
                                    item-value="value" label="客户星级" prepend-inner-icon="mdi-star"
                                    variant="outlined" color="primary" />
                            </v-col>
                            <v-col cols="12" md="3">
                                <v-select v-model="baseForm.bgColor" :items="predefinedColors"
                                    density="comfortable" hide-details="auto" item-value="value"
                                    label="卡片背景颜色" prepend-inner-icon="mdi-palette" variant="outlined"
                                    color="primary">
                                    <!-- 自定义选项显示 -->
                                    <template #item="{ props, item }">
                                        <v-list-item v-bind="props" class="px-4 py-3">
                                            <template #prepend>
                                                <div :style="{ backgroundColor: item.raw.value }"
                                                    class="color-preview mr-3"></div>
                                            </template>
                                            <v-list-item-subtitle class="text-caption text-grey-darken-1">
                                                {{ item.raw.description }}
                                            </v-list-item-subtitle>
                                        </v-list-item>
                                    </template>
                                    <!-- 自定义选中值显示 -->
                                    <template #selection="{ item }">
                                        <div class="d-flex align-center">
                                            <div :style="{ backgroundColor: item.raw.value }"
                                                class="color-preview-small mr-2"></div>
                                            <span>{{ item.raw.title }}</span>
                                        </div>
                                    </template>
                                </v-select>
                            </v-col>
                            <v-col cols="12" md="6">
                                <v-combobox v-model="baseForm.tags" :items="predefinedTags" 
                                    multiple chips clearable variant="outlined" color="primary"
                                    prepend-inner-icon="mdi-tag-multiple" 
                                    label="客户标签"
                                    placeholder="可选择预设标签或输入自定义标签"
                                    density="comfortable">
                                </v-combobox>
                            </v-col>
                            <v-col cols="12">
                                <v-textarea v-model="baseForm.remark" density="comfortable"
                                    hide-details="auto" label="备注信息" rows="3" variant="outlined"
                                    color="primary" prepend-inner-icon="mdi-note-text" />
                            </v-col>
                        </v-row>
                    </div>

                    <!-- 家长信息区域 -->
                    <div class="mb-8 hover-card elevation-9 pa-4 rounded-xl">
                        <div class="text-h6 text-primary mb-4 d-flex align-center">
                            <v-icon class="mr-2" color="primary">mdi-account-heart</v-icon>
                            家长信息
                        </div>
                        <v-row>
                            <!-- 家长头像区域 -->
                            <v-col cols="12" md="3" class="d-flex flex-column align-center">
                                <div class="text-body-2 mb-3 text-grey-darken-1">家长头像</div>
                                <div class="avatar-upload-area mx-auto mb-4" @click="openCustomerAvatarUpload">
                                    <div v-if="baseForm.customer.avatar" class="avatar-preview">
                                        <img :src="baseForm.customer.avatar" alt="家长头像"
                                            class="avatar-image" />
                                        <div class="avatar-overlay">
                                            <v-icon color="white">mdi-pencil</v-icon>
                                        </div>
                                    </div>
                                    <div v-else class="avatar-placeholder">
                                        <v-icon size="32" color="primary">mdi-camera-plus</v-icon>
                                        <p class="text-caption text-primary mt-2">点击上传头像</p>
                                    </div>
                                </div>
                            </v-col>

                            <!-- 家长基本信息 -->
                            <v-col cols="12" md="9">
                                <v-row>
                                    <v-col cols="12" md="6">
                                        <v-text-field v-model="baseForm.customer.phone" :rules="phoneRules"
                                            density="comfortable" hide-details="auto" label="家长手机号"
                                            prepend-inner-icon="mdi-phone" required variant="outlined"
                                            color="primary" @blur="searchCustomerByPhone" />
                                        <v-alert v-if="customerPhoneRepeat" class="mt-3" type="warning"
                                            variant="tonal" border="start" closable>
                                            该手机号已存在客户记录
                                        </v-alert>
                                    </v-col>
                                    <v-col cols="12" md="6">
                                        <v-text-field v-model="baseForm.customer.name"
                                            :readonly="!!baseForm.customer.id" :rules="nameRules"
                                            density="comfortable" hide-details="auto" label="家长姓名"
                                            prepend-inner-icon="mdi-account" variant="outlined" color="primary" />
                                    </v-col>
                                    <v-col cols="12" md="6">
                                        <v-select v-model="baseForm.customer.gender" :items="dict['customer_sex']"
                                            :readonly="!!baseForm.customer.id" density="comfortable"
                                            hide-details="auto" item-title="dictName" item-value="dictValue"
                                            label="性别" variant="outlined" color="primary"
                                            prepend-inner-icon="mdi-gender-male-female" />
                                    </v-col>
                                    <v-col cols="12" md="6">
                                        <v-text-field v-model="baseForm.customer.email"
                                            :readonly="!!baseForm.customer.id" density="comfortable"
                                            hide-details="auto" label="邮箱地址" variant="outlined" color="primary"
                                            prepend-inner-icon="mdi-email" />
                                    </v-col>
                                    <v-col cols="12">
                                        <v-text-field v-model="baseForm.customer.address"
                                            :readonly="!!baseForm.customer.id" density="comfortable"
                                            hide-details="auto" label="家庭住址" variant="outlined" color="primary"
                                            prepend-inner-icon="mdi-map-marker" />
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </div>

                    <!-- 学生信息区域 -->
                    <div class="mb-6 hover-card elevation-9 pa-4 rounded-xl">
                        <!-- 标题和添加按钮 -->
                        <div class="d-flex align-center justify-space-between mb-4">
                            <div class="d-flex align-center">
                                <div class="text-h6 text-primary d-flex align-center">
                                    <v-icon class="mr-2" color="primary">mdi-school</v-icon>
                                    学生信息
                                </div>
                                <v-chip class="ml-3" color="primary" size="small" variant="text">
                                    {{ baseForm.students.length }} 人
                                </v-chip>
                            </div>
                            <v-btn color="primary" prepend-icon="mdi-plus" size="small" variant="elevated"
                                @click="addStudent">
                                添加学生
                            </v-btn>
                        </div>

                        <!-- 空状态 -->
                        <div v-if="baseForm.students.length === 0" class="text-center pa-12">
                            <v-icon color="primary" size="80" class="mb-4">mdi-school-outline</v-icon>
                            <h4 class="text-h6 text-primary mb-2">还没有学生信息</h4>
                            <p class="text-grey-darken-1 mb-6">请添加至少一个学生信息来建立客户关系</p>
                            <v-btn color="primary" prepend-icon="mdi-plus" variant="elevated" size="large"
                                @click="addStudent">
                                立即添加学生
                            </v-btn>
                        </div>

                        <!-- 学生列表 -->
                        <div v-else>
                            <v-row>
                                <v-col v-for="(student, index) in baseForm.students" :key="index" 
                                       cols="12" lg="6" class="mb-4">
                                    <v-card class="student-card h-100 hover-card" variant="outlined" elevation="10"
                                        :class="{ 'primary-student': student.isPrimary === '1' }">
                                        
                                        <!-- 学生卡片头部 -->
                                        <v-card-title class="d-flex align-center justify-space-between pa-4 bg-grey-lighten-5">
                                            <div class="d-flex align-center">
                                                <v-icon color="primary" class="mr-2">mdi-account-school</v-icon>
                                                <span class="text-body-1 font-weight-medium">
                                                    学生 {{ index + 1 }}
                                                </span>
                                                <v-chip v-if="student.isPrimary === '1'" 
                                                        color="success" size="small" variant="o" class="ml-2">
                                                    主要联系人
                                                </v-chip>
                                            </div>
                                            <v-btn v-if="baseForm.students.length > 1"
                                                   color="error" icon size="small" variant="text"
                                                   @click="removeStudent(index)">
                                                <v-icon>mdi-delete</v-icon>
                                            </v-btn>
                                        </v-card-title>

                                        <v-card-text class="pa-4">
                                            <v-row>
                                                <!-- 学生头像 -->
                                                <v-col cols="12" md="3" class="text-center mb-3">
                                                    <div class="text-caption mb-2 text-grey-darken-1">学生头像</div>
                                                    <div class="avatar-upload-area small mx-auto"
                                                        @click="openStudentAvatarUpload(index)">
                                                        <div v-if="student.avatar" class="avatar-preview">
                                                            <img :src="student.avatar" alt="学生头像"
                                                                class="avatar-image" />
                                                            <div class="avatar-overlay">
                                                                <v-icon color="white" size="small">mdi-pencil</v-icon>
                                                            </div>
                                                        </div>
                                                        <div v-else class="avatar-placeholder">
                                                            <v-icon size="24" color="primary">mdi-camera-plus</v-icon>
                                                            <p class="text-caption text-primary mt-1">点击上传</p>
                                                        </div>
                                                    </div>
                                                </v-col>

                                                <!-- 基本信息 -->
                                                <v-col cols="12" md="9">
                                                    <v-text-field v-model="student.name"
                                                        :rules="studentNameRules" density="comfortable"
                                                        hide-details="auto" label="学生姓名" required
                                                        variant="outlined" color="primary" />
                                                    
                                                            <div class="d-flex mt-4 gap-2" >
                                                                <v-select v-model="student.gender"
                                                        :items="dict['customer_sex']" density="comfortable"
                                                        hide-details="auto" item-title="dictName"
                                                        item-value="dictValue" label="性别" variant="outlined"
                                                        color="primary" />

                                                        <v-text-field v-model="student.birthDate"
                                                        density="comfortable" hide-details="auto"
                                                        label="出生日期" type="date" variant="outlined"
                                                        color="primary" />
                                                            </div>
                                                   
                                                </v-col>
                                                   
                                                <v-col cols="12" md="6">
                                                    <v-select v-model="student.relationType"
                                                        :items="dict['relation_type']"
                                                        :rules="relationRules" density="comfortable"
                                                        hide-details="auto" item-title="dictName"
                                                        item-value="dictValue" label="与家长关系" required
                                                        variant="outlined" color="primary" />
                                                </v-col>
                                               
                                                <v-col cols="12" md="6">
                                                    <v-select v-model="student.grade"
                                                        :items="dict['student_grade']" density="comfortable"
                                                        hide-details="auto" item-title="dictName"
                                                        item-value="dictValue" label="年级" variant="outlined"
                                                        color="primary" />
                                                </v-col>
                                                <v-col cols="12" md="6">
                                                    <v-text-field v-model="student.school"
                                                        density="comfortable" hide-details="auto"
                                                        label="就读学校" variant="outlined" color="primary" />
                                                </v-col>
                                                <v-col cols="12" md="6">
                                                    <v-text-field v-model="student.className"
                                                        density="comfortable" hide-details="auto" label="班级"
                                                        variant="outlined" color="primary" />
                                                </v-col>

                                                <!-- 主要联系人设置 -->
                                                <v-col cols="12" class="pt-0">
                                                    <v-divider class="my-3"></v-divider>
                                                    <v-switch v-model="student.isPrimary" color="success"
                                                        false-value="0" hide-details label="设为主要联系人" 
                                                        true-value="1" inset @change="handlePrimaryChange(index)" />
                                                </v-col>
                                            </v-row>
                                        </v-card-text>
                                    </v-card>
                                </v-col>
                            </v-row>
                        </div>
                    </div>
                </v-form>
            </v-card-text>

            <!-- 操作按钮 -->
            <v-card-actions class="pa-6 bg-grey-lighten-4 d-flex justify-end">
                <v-btn color="grey-darken-1" variant="outlined" size="large" @click="close">
                    <v-icon class="mr-2">mdi-close</v-icon>
                    取消
                </v-btn>
                <v-btn :disabled="!canSave" :loading="saving" color="primary" variant="elevated" size="large"
                    class="ml-3" @click="save">
                    <v-icon class="mr-2">{{ isEdit ? 'mdi-check' : 'mdi-content-save' }}</v-icon>
                    {{ isEdit ? '确认修改' : '确认保存' }}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

    <!-- 图片上传对话框 -->
    <ImageUploadDialog ref="imageUploadDialog" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick, onMounted } from 'vue';
import { useMessage } from '@/composables/useMessage';
import { getDictListSync } from '@/utils/dict';
import { getChannelListSync } from '@/utils/channel';
import { getList as getCustomerList, type CustomersInfoModel } from '@/api/customer/customerinfo/CustomersInfoManagementApi';
import { doInsert as insertStudent, type CustomersStudentModel } from '@/api/customer/student/CustomersStudentManagementApi';
import {
    batchCreateRelations,
    type CustomerStudentRelationModel,
    doInsert,
    doUpdate
} from '@/api/customer/customerrelation/CustomerStudentRelationManagementApi';
import ImageUploadDialog from '@/components/shared/ImageUploadDialog.vue';

const { success: showSuccess, error: showError } = useMessage();

// 基础数据
const dialogVisible = ref(false);
const formValid = ref(false);
const formRef = ref();
const saving = ref(false);
const isEdit = ref(false);
/**
 * 手机号是否重复
 */
const customerPhoneRepeat = ref(false);

// 图片上传组件引用
const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();

// 基础信息 - 使用自定义表单类型
const baseForm = ref<CustomerStudentRelationModel>({
    students: [] as CustomersStudentModel[],
    customer: {
        phone: '',
        name: '',
        gender: '1',
        email: '',
        address: '',
        status: '1',
        avatar: ''
    },
    sourceChannel: '',
    relationType: '',
    bgColor: undefined,
    priority: '3',
    remark: '',
    status: 1
});

// 帮我预设一些标签选项。这是通用教培系统的客户标签
const predefinedTags = ref([
    // 意向程度
    '高意向', '中意向', '低意向', '无意向',

    // 客户状态
    '新客户', '老客户', 'VIP客户', '潜在客户',

    // 成交状态
    '已成交', '待成交', '已签约', '待签约',

    // 学习状态
    '试听中', '正式学员', '续费学员', '毕业学员',

    // 客户来源
    '转介绍', '网络咨询', '地推获客', '活动报名', '老客续费',

    // 跟进状态
    '待跟进', '跟进中', '已预约', '已回访',

    // 特殊标记
    '重点客户', '优质客户', '投诉客户', '黑名单',

    // 学习特点
    '成绩优秀', '需要提升', '学习积极', '配合度高',

    // 付费状态
    '已付费', '待付费', '分期付款', '已退费', '欠费',

    // 家长特点
    '很支持', '一般支持', '不太支持', '要求很高', '很配合',

    // 其他标记
    '已流失', '已暂停', '考虑中', '价格敏感', '时间紧张'
]);

// 字典数据
const dict = reactive({
    customer_sex: [] as any[],
    relation_type: [] as any[],
    student_grade: [] as any[],
    student_status: [] as any[],
    customer_type: [] as any[],
    source_channel: [] as any[],
    relation_status: [] as any[]
});

// 渠道数据
const channels = ref([] as any[]);

// 验证规则
const phoneRules = [(v: any) => !!v || '家长手机号不能为空', (v: any) => /^1[3-9]\d{9}$/.test(v) || '请输入有效的手机号'];

const nameRules = [(v: any) => !!v || '家长姓名不能为空'];

const studentNameRules = [(v: any) => !!v || '学生姓名不能为空'];

const relationRules = [(v: any) => !!v || '与家长关系不能为空'];

// 计算属性
const canSave = computed(() => {
    return (
        formValid.value &&
        baseForm.value.customer.phone &&
        baseForm.value.customer.name &&
        baseForm.value.students.length > 0 &&
        baseForm.value.students.every((s: CustomersStudentModel) => s.name && s.relationType) &&
        baseForm.value.students.some((s: CustomersStudentModel) => s.isPrimary === '1')
    ); // 确保至少有一个主要联系人
});

// 事件发射
const emit = defineEmits<{
    fetchData: [];
}>();

const predefinedColors = [
    { title: '普通客户', value: '#FFFFFF', description: '默认白色背景，适合一般客户' },
    { title: 'VIP客户', value: '#FFF8DC', description: '金色背景，重要客户标识' },
    { title: '意向客户', value: '#E1F5FE', description: '浅蓝色背景，有意向但未报名' },
    { title: '试听客户', value: '#E8F5E8', description: '浅绿色背景，正在试听课程' },
    { title: '正式学员', value: '#BBDEFB', description: '蓝色背景，已报名正式学员' },
    { title: '老学员', value: '#C8E6C9', description: '绿色背景，长期稳定学员' },
    { title: '欠费客户', value: '#FFCDD2', description: '浅红色背景，提醒欠费情况' },
    { title: '暂停学员', value: '#EEEEEE', description: '灰色背景，暂停上课的学员' },
    { title: '毕业学员', value: '#DCEDC1', description: '薄荷绿背景，已毕业学员' },
    { title: '投诉客户', value: '#FFAB91', description: '橙红色背景，需要特别关注' },
    { title: '转介绍', value: '#C5E1A5', description: '绿色背景，通过转介绍来的客户' },
    { title: '网络客户', value: '#B3E5FC', description: '天蓝色背景，网络渠道客户' },
    { title: '地推客户', value: '#FFF3E0', description: '米色背景，地面推广客户' },
    { title: '活动客户', value: '#E1BEE7', description: '紫色背景，活动期间客户' },
    { title: '高价值', value: '#FFCC80', description: '橙色背景，高消费潜力客户' },
    { title: '重点关注', value: '#F8BBD9', description: '粉色背景，需要重点跟进' }
];

// 初始化
onMounted(() => {
    loadDictData();
    loadChannelData();
});

// 加载字典数据
function loadDictData() {
    dict['customer_sex'] = getDictListSync('customer_sex') || [];
    dict['relation_type'] = getDictListSync('relation_type') || [];
    dict['student_grade'] = getDictListSync('student_grade') || [];
    dict['student_status'] = getDictListSync('student_status') || [];
    dict['customer_type'] = getDictListSync('customer_type') || [];
    dict['source_channel'] = getDictListSync('source_channel') || [];
    dict['relation_status'] = getDictListSync('relation_status') || [];
}

// 加载渠道数据
function loadChannelData() {
    channels.value = getChannelListSync() || [];
}

// 根据手机号搜索客户
async function searchCustomerByPhone() {
    if (!baseForm.value.customer.phone || !/^1[3-9]\d{9}$/.test(baseForm.value.customer.phone)) {
        resetParentInfo();
        return;
    }

    try {
        const { data, code, msg } = await getCustomerList({
            phone_LIKE: baseForm.value.customer.phone,
            pageNo: 1,
            pageSize: 1
        });

        if (code === 0) {
            customerPhoneRepeat.value = data.rows.length > 0 && !baseForm.value.customer.id;
        }
    } catch (error) {
        console.error('搜索客户失败:', error);
        showError('搜索客户信息失败');
    }
}

// 重置家长信息
function resetParentInfo() {
    baseForm.value.customer.id = undefined;
    baseForm.value.customer.name = '';
    baseForm.value.customer.gender = '';
    baseForm.value.customer.email = '';
    baseForm.value.customer.address = '';
}

// 添加学生
function addStudent() {
    const isPrimary = baseForm.value.students.length === 0 ? '1' : '0'; // 第一个学生默认为主要联系人
    baseForm.value.students.push({} as CustomersStudentModel);
}

// 移除学生
function removeStudent(index: number) {
    const removedStudent = baseForm.value.students[index];
    baseForm.value.students.splice(index, 1);

    // 如果删除的是主要联系人且还有其他学生，将第一个学生设为主要联系人
    if (removedStudent.isPrimary === '1' && baseForm.value.students.length > 0) {
        baseForm.value.students[0].isPrimary = '1';
    }
}

// 处理主要联系人变更
function handlePrimaryChange(index: number) {
    if (baseForm.value.students[index].isPrimary === '1') {
        // 将其他学生的主要联系人设为false
        baseForm.value.students.forEach((student: CustomersStudentModel, i: number) => {
            if (i !== index) {
                student.isPrimary = '0';
            }
        });
    }
}

// 打开客户头像上传
async function openCustomerAvatarUpload() {
    try {
        const result = await imageUploadDialog.value?.open({
            title: '上传家长头像',
            width: 120,
            height: 120,
            maxSize: 2
        });

        if (result) {
            baseForm.value.customer.avatar = result.fileStoragePath;
            console.log('客户头像上传成功:', result.fileStoragePath);
            // 这里可以调用上传API
        }
    } catch (error) {
        if (error instanceof Error && error.message !== '用户取消操作') {
            showError(error.message);
        }
    }
}

// 打开学生头像上传
async function openStudentAvatarUpload(index: number) {
    try {
        const result = await imageUploadDialog.value?.open({
            title: '上传学生头像',
            width: 100,
            height: 100,
            maxSize: 2
        });

        if (result) {
            baseForm.value.students[index].avatar = result?.fileStoragePath;
            // 这里可以调用上传API
        }
    } catch (error) {
        if (error instanceof Error && error.message !== '用户取消操作') {
            showError(error.message);
        }
    }
}

// 显示对话框
function show(data: CustomerStudentRelationModel | undefined) {
    if (data) {
        // 复制数据
        const form = JSON.parse(JSON.stringify(data));
        //仅保留一个学生、且把关系放进学生信息中
        form.students = [form.students[0]];
        form.students[0].relationType = data.relationType || '';
        form.students[0].isPrimary = data.isPrimary || '';
        baseForm.value = form;
        isEdit.value = true;
    } else {
        baseForm.value = {
            sourceChannel: '1939561369180938242',
            priority: '3',
            remark: '',
            status: 1,
            customer: {
                phone: '17607080935',
                name: '瓜瓜',
                gender: '1',
                email: '17607080935@163.com',
                address: '北京市海淀区',
                status: '1',
                avatar: ''
            },
            relationType: '1',
            students: [
                {
                    relationType: '1',
                } as CustomersStudentModel
            ]
        };
    }
    console.log(baseForm.value);
    dialogVisible.value = true;
    // 重置表单

}

// 关闭对话框
function close() {
    dialogVisible.value = false;
    nextTick(() => {
        if (formRef.value) {
            formRef.value.reset();
        }
    });
}

// 保存
async function save() {
    if (!canSave.value) return;

    saving.value = true;
    try {
        if (isEdit.value) {
            const { code, msg, data } = await doUpdate(baseForm.value);
            if (code === 0) {
                showSuccess('客户修改成功');
                emit('fetchData');
                close();
            } else {
                showError(msg);
            }
        } else {

            const { code, msg, data } = await doInsert(baseForm.value);
            if (code === 0) {
                showSuccess('客户创建成功');
                emit('fetchData');
                close();
            } else {
                showError(msg);
            }
        }

    } finally {
        saving.value = false;
    }
}

// 暴露方法
defineExpose({
    show
});
</script>

<style lang="scss" scoped>
.gap-2 {
    gap: 8px;
}

.gap-1 {
    gap: 4px;
}



// 表单样式优化
:deep(.v-card) {
    border-radius: 12px !important;

    .v-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 12px 12px 0 0;
    }
}

// 学生卡片样式
.student-card {
    transition: all 0.3s ease;
    position: relative;

    &.primary-student {
        border-color: rgba(var(--v-theme-success), 0.5);
        background: linear-gradient(135deg, rgba(var(--v-theme-success), 0.02) 0%, rgba(var(--v-theme-success), 0.05) 100%);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: rgb(var(--v-theme-success));
            border-radius: 12px 0 0 12px;
        }
    }
}

// 头像上传区域样式
.avatar-upload-area {
    width: 120px;
    height: 120px;
    border: 3px dashed rgba(var(--v-theme-primary), 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.02) 0%, rgba(var(--v-theme-primary), 0.05) 100%);

    &:hover {
        border-color: rgb(var(--v-theme-primary));
        background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.05) 0%, rgba(var(--v-theme-primary), 0.1) 100%);
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.2);
    }

    &.small {
        width: 100px;
        height: 100px;
    }
}

.avatar-preview {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;

    &:hover .avatar-overlay {
        opacity: 1;
    }
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.avatar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;

    .v-icon {
        transition: all 0.3s ease;
    }

    p {
        transition: all 0.3s ease;
        font-weight: 500;
    }
}

// 颜色预览样式
.color-preview {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.color-preview-small {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: inline-block;
    flex-shrink: 0;
}

// 下拉选项悬停效果
:deep(.v-list-item) {
    min-height: 64px !important;
    border-radius: 8px;
    margin: 2px 4px;
    transition: all 0.2s ease;

    &:hover {
        background-color: rgba(var(--v-theme-primary), 0.04) !important;

        .color-preview {
            transform: scale(1.1);
            border-color: rgba(var(--v-theme-primary), 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
    }

    .v-list-item-subtitle {
        opacity: 0.7;
        font-size: 0.75rem !important;
        line-height: 1.3;
        margin-top: 2px;
    }
}

// 输入框优化
:deep(.v-field) {
    border-radius: 8px;

    &.v-field--focused {
        box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.1);
    }
}

// 按钮优化
:deep(.v-btn) {
    border-radius: 8px;
    font-weight: 500;
    text-transform: none;

    &.v-btn--variant-elevated {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }
    }
}

// 卡片区域背景渐变
.bg-indigo-lighten-5 {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-bottom: 1px solid rgba(var(--v-border-color), 0.2);
}

.bg-orange-lighten-5 {
    background: linear-gradient(135deg, #fef7f0 0%, #fed7aa 100%);
    border-bottom: 1px solid rgba(var(--v-border-color), 0.2);
}

.bg-teal-lighten-5 {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border-bottom: 1px solid rgba(var(--v-border-color), 0.2);
}

// 响应式优化
@media (max-width: 1280px) {
    .avatar-upload-area {
        width: 100px;
        height: 100px;

        &.small {
            width: 80px;
            height: 80px;
        }
    }
}

@media (max-width: 960px) {
    :deep(.v-dialog) {
        margin: 12px;
        max-width: calc(100% - 24px) !important;
    }

    .student-card {
        margin-bottom: 16px;
    }
}

// 滚动条样式
:deep(.v-card-text) {
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;

        &:hover {
            background: #a8a8a8;
        }
    }
}

// 动画效果
.student-card {
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// 主要联系人标识
.primary-student {
    position: relative;

    &::after {
        content: '主要';
        position: absolute;
        top: -1px;
        right: -1px;
        background: rgb(var(--v-theme-success));
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 0 12px 0 8px;
        font-weight: 600;
        z-index: 1;
    }
}
</style>
